<template>
	<view class="box box-card">
		<view v-show="!showUpdatePwd">
			<uni-forms ref="userForm" :modelValue="userForm" :rules="formPhoneRules" errShowType="toast">
				<uni-forms-item name="phone">
					<uni-easyinput type="number" v-model="userForm.phone" placeholder="手机号" :clearable="false"
						maxlength="11">
						<template v-slot:right>
							<button class="get-code" @click="getCode" :disabled="showTime">获取验证码
								<span v-if="showTime">({{seconds}})</span>
							</button>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="code">
					<uni-easyinput type="password" v-model="userForm.code" placeholder="验证码" maxlength="4">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<button class="form-button uni-mt-10" @click="checkPhone">验证</button>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view v-show="showUpdatePwd">
			<uni-forms ref="updatePwdForm" :modelValue="updatePwdForm" labelWidth="70px" errShowType="toast">
				<uni-forms-item name="newPwd" label="新密码">
					<uni-easyinput type="password" v-model="updatePwdForm.newPwd" placeholder="新密码" maxlength="20">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="comfirmPwd" label="确认密码">
					<uni-easyinput type="password" v-model="updatePwdForm.comfirmPwd" placeholder="确认密码"
						maxlength="20">
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item labelWidth="0px">
					<button class="form-button uni-mt-10" @click="update">保存</button>
				</uni-forms-item>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showUpdatePwd: false,
				userForm: {
					phone: '',
					code: ''
				},
				showTime: false,
				seconds: 60,
				timer: null,
				formPhoneRules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							pattern: '^[1][3,4,5,7,8,9][0-9]{9}$',
							errorMessage: '请输入正确的手机号码'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					}
				},
				updatePwdForm: {
					newPwd: '',
					comfirmPwd: '',
					checkOldPwd: 'N'
				},
				formPwdRules: {
					newPwd: {
						rules: [{
							required: true,
							errorMessage: '请输入新密码'
						}]
					},
					comfirmPwd: {
						rules: [{
							required: true,
							errorMessage: '请输入确认密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value === data.newPwd) {
									return true;
								} else {
									callback('新密码输入不一致，请重新输入')
								}
							}
						}]
					}
				}
			}
		},
		onReady() {
			this.$refs.updatePwdForm.setRules(this.formPwdRules)
		},
		methods: {
			getCode() {
				this.$refs.userForm.validateField(['phone']).then(() => {

					clearInterval(this.timer)
					this.showTime = true;
					this.seconds = 60;

					this.timer = setInterval(() => {
						this.seconds--;
						if (this.seconds <= 0) {
							this.showTime = false;
							clearInterval(this.timer);
						}
					}, 1000)

					this.$api.post('/appLogin/getSmsCode', {
						phone: this.userForm.phone
					}).then(res => {
						this.$util.messageTip('短信发送成功');
					})
				})
			},
			checkPhone() {
				this.$refs.userForm.validate().then(() => {
					this.$api.post('/appLogin/checkSmsCode', this.userForm).then(res => {
						this.$util.saveLoginToken(res.data.token);
						this.showUpdatePwd = true;
					})
				})
			},
			update() {
				this.$refs.updatePwdForm.validate().then(() => {
					this.$api.post('/appUser/updatePwd', this.updatePwdForm).then(res => {
						this.$util.removeLoginToken();
						uni.reLaunch({
							url: '/pages/my/my',
							success: () => {
								this.$util.messageTip(res.message);
							}
						})
					})
				})
			}
		}
	}
</script>
